<template>
  <v-card class="login_card mx-auto d-flex flex-column" min-width="400" max-width="500">
    <v-card-title class="text-center bg-primary rounded-t-lg">
      智慧课程平台(CP)
    </v-card-title>
    <form @submit="submit">
      <v-card-text>
        <v-text-field
        class="my-5"
          v-model="account"
          v-bind="accountAttrs"
          :error-messages="errors.account"
          prepend-inner-icon="mdi-account"
          label="用户名"
          placeholder="请输入用户名"
          type="text"
          variant="outlined"
          autocomplete="username"
        />
        <v-text-field
        class="mt-10"
          v-model="passwd"
          v-bind="passwdAttrs"
          :error-messages="errors.passwd"
          prepend-inner-icon="mdi-lock"
          label="密码"
          placeholder="请输入密码"
          type="password"
          variant="outlined"
        />
      </v-card-text>
      <v-card-actions
        class="mb-10 mx-auto d-flex flex-row justify-md-center"
      >
        <v-btn type="submit" class="mx-auto border-sm bg-primary w-25" > 登录 </v-btn>
        <v-btn @click="forgetPasswd" class="mx-auto border-sm w-25"> 忘记密码? </v-btn>
      </v-card-actions>
    </form>
  </v-card>
  <v-overlay
      :model-value="overlay"
      class="align-center justify-center"
    >
      <v-progress-circular
        color="primary"
        size="32"
        indeterminate
      ></v-progress-circular>
  </v-overlay>

  <v-overlay
    :model-value="error.state"
    opacity="0"
    class="align-center justify-center"
  >
  <v-chip variant="elevated">
    <v-icon color="error" icon="mdi-alert" size="large"/>
    {{ error.msg }}
  </v-chip>

  </v-overlay>


</template>

<script setup lang="ts">
import { Role, type InputLogin } from '@/services/users/types';
import { useTokenStore } from '@/stores/token';
import { toTypedSchema } from '@vee-validate/yup';
import { useForm } from 'vee-validate';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import * as yup from 'yup';
const error = ref({"state": false, "msg": ""});

// 警告文本
const overlay = ref(false);

function sleep(ms:number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function alert(msg: string) {
  error.value.state = true;
  error.value.msg = msg;
  sleep(1000).then(() => {
    error.value.state = false;
  });
}


// 表单构建
const schema = toTypedSchema(
  yup.object({
    account: yup.string().required("用户名不能为空"),
    passwd: yup.string().required("密码不能为空"),
    // account: yup.string().matches(/^\d{8}$/, "请输入正确的用户名").required("用户名不能为空"),
    // passwd: yup.string().min(6, "密码长度不能小于6").required("密码不能为空"),
  })
);
const { handleSubmit, defineField, errors } = useForm({
  validationSchema: schema,
});
const [account, accountAttrs] = defineField('account');
const [passwd, passwdAttrs] = defineField('passwd');

// 按钮事件
const router = useRouter();
const submit = handleSubmit(async (values) => {
  const input : InputLogin = {
    account: values.account,
    password: values.passwd
  };
  overlay.value = true;
  const token = useTokenStore()
  await token.dispatchLogin(input).then(()=>{
    overlay.value = false;
    console.log(token.token.role);
    if (token.token.role === Role.Admin)
    {
      router.push({name: 'AdminPage'})
    }
    else
      router.push({name: 'PersonPage'});
  }).catch((err) => {
    overlay.value = false;
    alert(err);
  });

});

function forgetPasswd() {
  router.push({name: 'ResetPasswd'});
}
</script>

<style scoped>

</style>
